{include file='header.tpl' menu='topic_action' }

{if $oConfig->GetValue('view.tinymce')}
    <script type="text/javascript" src="{cfg name='path.root.engine_lib'}/external/tinymce-jq/tiny_mce.js"></script>

    <script type="text/javascript">
	{literal}
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_buttons1 : "lshselect,bold,italic,underline,strikethrough,|,bullist,numlist,|,undo,redo,|,lslink,unlink,lsvideo,lsimage,pagebreak,code",
		theme_advanced_buttons2 : "",
		theme_advanced_buttons3 : "",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,
		theme_advanced_resize_horizontal : 0,
		theme_advanced_resizing_use_cookie : 0,
		theme_advanced_path : false,
		object_resizing : true,
		force_br_newlines : true,
		forced_root_block : '', // Needed for 3.x
		force_p_newlines : false,
		plugins : "lseditor,safari,inlinepopups,media,pagebreak",
		inline_styles:false,
		formats : {
		    underline : {inline : 'u', exact : true},
		    strikethrough : {inline : 's', exact : true}
		},
		convert_urls : false,
		extended_valid_elements : "embed[src|type|allowscriptaccess|allowfullscreen|width|height]",
		pagebreak_separator :"<cut>",
		media_strict : false,
		language : TINYMCE_LANG
	});
	{/literal}
    </script>

{else}
    {include file='window_load_img.tpl' sToLoad='topic_text'}
    <script type="text/javascript">
	jQuery(document).ready(function($){
		ls.lang.load({lang_load name="panel_b,panel_i,panel_u,panel_s,panel_url,panel_url_promt,panel_code,panel_video,panel_image,panel_cut,panel_quote,panel_list,panel_list_ul,panel_list_ol,panel_title,panel_clear_tags,panel_video_promt,panel_list_li,panel_image_promt,panel_user,panel_user_promt"});
		$('#topic_text').markItUp(getMarkitupSettings());
	});
    </script>
{/if}

<script type="text/javascript">
if (jQuery.browser.flash) {
	ls.photoset.initSwfUpload({
		post_params: { 'topic_id':'{$_aRequest.topic_id}' }
	});
}
</script>

<div class="topic" style="display: none;">
    <div class="content" id="text_preview"></div>
</div>


{if $sEvent=='add'}
    <h2>{$aLang.topic_photoset_create}</h2>
{else}
    <h2>{$aLang.topic_photoset_edit}</h2>
{/if}
<form id="photoset-upload-form" method="POST" enctype="multipart/form-data" onsubmit="return false;">
    <p id="topic-photo-upload-input" class="topic-photo-upload-input">
	<label for="">{$aLang.topic_photoset_choose_image}:</label><br />
	<input type="file" id="photoset-upload-file" name="Filedata" /><br><br>

	<button onclick="ls.photoset.upload();">{$aLang.topic_photoset_upload_choose}</button>
	<button onclick="ls.photoset.closeForm();">{$aLang.topic_photoset_upload_close}</button>
	<input type="hidden" name="is_iframe" value="true" />
	<input type="hidden" name="topic_id" value="{$_aRequest.topic_id}" />
    </p>
</form>

<form action="" method="POST" enctype="multipart/form-data">
    {hook run='form_add_topic_photoset_begin'}

    <input type="hidden" name="security_ls_key" value="{$LIVESTREET_SECURITY_KEY}" />

    <p><label for="blog_id">{$aLang.topic_create_blog}</label><br />
	<select name="blog_id" id="blog_id" onChange="ls.blog.loadInfo(this.value);" class="input-wide">
	    <option value="0">{$aLang.topic_create_blog_personal}</option>
	    {foreach from=$aBlogsAllow item=oBlog}
		<option value="{$oBlog->getId()}" {if $_aRequest.blog_id==$oBlog->getId()}selected{/if}>{$oBlog->getTitle()|escape:'html'}</option>
	    {/foreach}
	</select></p>

    <script language="JavaScript" type="text/javascript">
		jQuery(document).ready(function($){
			ls.blog.loadInfo($('#blog_id').val());
	});
    </script>

    <p><label for="topic_title">{$aLang.topic_create_title}:</label><br />
	<input type="text" id="topic_title" name="topic_title" value="{$_aRequest.topic_title}" class="input-wide" /><br />
	<span class="note">{$aLang.topic_create_title_notice}</span>
    </p>

    <p>
	<label for="topic_text">{$aLang.topic_create_text}{if !$oConfig->GetValue('view.tinymce')} ({$aLang.topic_create_text_notice}){/if}:</label>
	<textarea name="topic_text" id="topic_text" rows="20" class="input-wide">{$_aRequest.topic_text}</textarea>
    </p>

    <!-- Topic Photo Add -->
    <div class="topic-photo-upload">
	<h2>{$aLang.topic_photoset_upload_title}</h2>

	<div class="topic-photo-upload-rules">
	    {$aLang.topic_photoset_upload_rules|ls_lang:"SIZE%%`$oConfig->get('module.topic.photoset.photo_max_size')`":"COUNT%%`$oConfig->get('module.topic.photoset.count_photos_max')`"}
	</div>

	<div id="rt-v" style="min-height: 150px;">

	</div>
	<input type="hidden" name="topic_main_photo" id="topic_main_photo" value="{$_aRequest.topic_main_photo}" />
	{*
	<ul id="swfu_images">
	    {if count($aPhotos)}
		{foreach from=$aPhotos item=oPhoto}
		    {if $_aRequest.topic_main_photo && $_aRequest.topic_main_photo == $oPhoto->getId()}
			{assign var=bIsMainPhoto value=true}
		    {/if}
		    <li id="photo_{$oPhoto->getId()}" {if $bIsMainPhoto}class="marked-as-preview"{/if}>
			<img src="{$oPhoto->getWebPath('100crop')}" alt="image" />
			<textarea onBlur="ls.photoset.setPreviewDescription({$oPhoto->getId()}, this.value)">{$oPhoto->getDescription()}</textarea><br />
			<a href="javascript:ls.photoset.deletePhoto({$oPhoto->getId()})" class="image-delete">{$aLang.topic_photoset_photo_delete}</a>
			<span id="photo_preview_state_{$oPhoto->getId()}" class="photo-preview-state">
			    {if $bIsMainPhoto}
				{$aLang.topic_photoset_is_preview}
			    {else}
				<a href="javascript:ls.photoset.setPreview({$oPhoto->getId()})" class="mark-as-preview">{$aLang.topic_photoset_mark_as_preview}</a>
			    {/if}
			</span>
		    </li>
		    {assign var=bIsMainPhoto value=false}
		{/foreach}
	    {/if}
	</ul>
	<a href="javascript:ls.photoset.showForm()" id="photoset-start-upload">{$aLang.topic_photoset_upload_choose}</a>*}



    </div>
    <!-- /Topic Photo Add -->


    <p><label for="topic_tags">{$aLang.topic_create_tags}:</label><br />
	<input type="text" id="topic_tags" name="topic_tags" value="{$_aRequest.topic_tags}" class="input-wide autocomplete-tags-sep" /><br />
	<span class="note">{$aLang.topic_create_tags_notice}</span></p>

    <p><label for="topic_forbid_comment"><input type="checkbox" id="topic_forbid_comment" name="topic_forbid_comment" class="checkbox" value="1" {if $_aRequest.topic_forbid_comment==1}checked{/if} />
	    {$aLang.topic_create_forbid_comment}</label><br />
	<span class="note">{$aLang.topic_create_forbid_comment_notice}</span></p>

    {if $oUserCurrent->isAdministrator()}
	<p><label for="topic_publish_index"><input type="checkbox" id="topic_publish_index" name="topic_publish_index" class="checkbox" value="1" {if $_aRequest.topic_publish_index==1}checked{/if} />
		{$aLang.topic_create_publish_index}</label><br />
	    <span class="note">{$aLang.topic_create_publish_index_notice}</span></p>
	{/if}

    {hook run='form_add_topic_photoset_end'}

    <p class="buttons">
	<input type="submit" name="submit_topic_publish" value="{$aLang.topic_create_submit_publish}" class="right" />
	<input type="submit" name="submit_preview" value="{$aLang.topic_create_submit_preview}" onclick="jQuery('#text_preview').parent().show(); ls.tools.textPreview('topic_text',false); return false;" />&nbsp;
	<input type="submit" name="submit_topic_save" value="{$aLang.topic_create_submit_save}" />
    </p>
</form>

{literal}
    <script>
    //jQuery(document).ready(function($){
		$(".t7d").click(function() {
		  alert("Handler for .click() called.");
		});
		$("span7 button.delete").click(function() {
		  alert("Handler for .click() called2.");
		});
	//});
    </script>
{/literal}
<!-- Bootstrap CSS Toolkit styles -->
<link rel="stylesheet" href="{$sTWPJfu}/css/bootstrap.min.css">
<!-- Generic page styles -->
{*<link rel="stylesheet" href="{$sTWPJfu}/css/style.css">
<!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
<!-- Bootstrap CSS fixes for IE6 -->
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
<!-- Bootstrap Image Gallery styles -->
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->*}
<link rel="stylesheet" href="{$sTWPJfu}/css/jquery.fileupload-ui.css">
<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script src="{$sTWPJfu}/js/jquery.fileupload.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="{$sTWPJfu}/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="{$sTWPJfu}/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="{$sTWPJfu}/js/jquery.fileupload.js"></script>
<!-- The File Upload file processing plugin -->
<script src="{$sTWPJfu}/js/jquery.fileupload-fp.js"></script>
<!-- The File Upload user interface plugin -->
<script src="{$sTWPJfu}/js/jquery.fileupload-ui.js"></script>
<!-- The localization script -->
<script src="{$sTWPJfu}/js/locale.js"></script>
<!-- The main application script -->
<script src="{$sTWPJfu}/js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="{$sTWPJfu}/js/cors/jquery.xdr-transport.js"></script><![endif]-->

<div class="rty" id="rty">

   <form id="fileupload" action="{router page="jfu"}" method="POST" enctype="multipart/form-data" style="display:none; position: fixed;">
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>
	    <div style="clear: both;"></div>
            <!-- The global progress information -->
            <div class="span5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active">
                    <div class="bar" style="width:0%;"></div>
                </div>
                <!-- The extended global progress information -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table id="tt" class="table table-striped" style="width: 560px;"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </form>


{literal}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}

    <tr class="template-upload fade">
        <td class="preview" style="width: 100px;"><span class="fade"></span></td>
        <td class="name" style="width: 280px;">
	    <textarea onBlur="ls.photoset.setPreviewDescription({%=file.id%}, this.value)">{%=file.description%}</textarea>
	</td>
        <td class="size" style="width: 100px;"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name" style="width: 280px;">
		<textarea onBlur="ls.photoset.setPreviewDescription({%=file.id%}, this.value)">{%=file.description%}</textarea>
	    </td>
            <td class="size" style="width: 100px;"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview" style="width: 100px;">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name" style="width: 280px;">
		<textarea onBlur="ls.photoset.setPreviewDescription({%=file.id%}, this.value)">{%=file.description%}</textarea>
            </td>
            <td class="size" style="width: 100px;"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete" style="width: 110px;">
            <button class="btn btn-danger t7d" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>
{/literal}
    <script>
var cf = {if $aPhotos}100+({count($aPhotos)}*90){else}100{/if};
{literal}
	$(function () {
	    var $select = $('#rt-v');
	    if ($select.length) {
		var pos = $select.offset();
		var pos = $select.offset();
		w = $select.outerWidth();
		h = $select.outerHeight();
		t = parseInt(pos.top) + 'px';
		l = parseInt(pos.left) + 'px';
	    }
	    //alert(t+'|'+l);
	    $('#fileupload').css({'top':t,'left':l,'display':'block', 'position': 'absolute'});
	    jQuery('#rt-v').css('height',cf+'px');
	});
	$('#fileupload')
	.bind('fileuploadadd', function (e, data) {//alert(1)/*add*/
	    var ltr=($('#tt').children('tbody').children('tr').length+1)*90;
	    jQuery('#rt-v').css('height',ltr+100+'px');
	})
	.bind('fileuploadfail', function (e, data) {//alert(5)/*cancel dlobal, cancel*/
	    var ltr=($('#tt').children('tbody').children('tr').length-1)*90;
	    jQuery('#rt-v').css('height',ltr+'px');
	});
//	jQuery(document).ready(function($){
//		$(".t7d").click(function() {
//		  alert("Handler for .click() called.");
//		});
//		$("span7 button.delete").click(function() {
//		  alert("Handler for .click() called2.");
//		});
//	});
    </script>
{/literal}

</div>
{include file='footer.tpl'}